import React from 'react';
import { GridItem } from '../types/memoryTest';
import { MEMORY_TEST_CONFIG } from '../constants/memoryTest';

interface MemoryTestGridProps {
  grid: GridItem[];
  sequence: number[];
  showSequence: boolean;
  onCellClick: (cellId: number) => void;
  isInteractive: boolean;
}

export function MemoryTestGrid({ 
  grid, 
  sequence, 
  showSequence, 
  onCellClick, 
  isInteractive 
}: MemoryTestGridProps) {
  return (
    <div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
      {grid.map((cell) => {
        let cellClass = "aspect-square border-2 rounded-lg transition-all duration-200 hover:border-primary";
        
        if (!isInteractive) {
          cellClass += " cursor-not-allowed";
        } else {
          cellClass += " cursor-pointer";
        }
        
        if (showSequence && sequence.includes(cell.id)) {
          cellClass += " bg-blue-500 border-blue-600 text-white font-bold text-lg flex items-center justify-center";
        } else if (cell.isSelected) {
          if (cell.isCorrect === true) {
            cellClass += " bg-green-500 border-green-600";
          } else if (cell.isCorrect === false) {
            cellClass += " bg-red-500 border-red-600";
          } else {
            cellClass += " bg-gray-400 border-gray-500";
          }
        } else {
          cellClass += " bg-muted border-border";
        }

        return (
          <div
            key={cell.id}
            className={cellClass}
            onClick={() => isInteractive && onCellClick(cell.id)}
          >
            {showSequence && sequence.includes(cell.id) && (
              <span>{sequence.indexOf(cell.id) + 1}</span>
            )}
          </div>
        );
      })}
    </div>
  );
}